*{
  margin:0px;
  padding:0px;
  list-style: none;
}

main{
  position: relative;
  background-color: #F7F7F7;
  display: flex!important;
  width: 100%;
}

main::before{
  content: '';
  position: absolute;
  top: 0;
  height: 10px;
  width: 100%;
  background-image:linear-gradient(139deg, #fb8817, #ff4b01, #c12127, #e02aff); 


}
.center{
  width: 30rem;
  padding-top: 80px;
  margin:auto auto
}

.mpn{
  margin:0px 0px 40px 0px;
  text-align: center;
}
svg{
  width: 144px;
}
.login{
  border-radius: .5rem;
  background-color: white;
  margin-bottom: 160px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
}
.login-1{
  padding:2rem;
}
.login-top{
  height: 200px;
  width: 200px;
  background-color: #ddd;
  margin: 0px auto;
  border-radius: 100px;
  overflow: hidden;
  position: relative;

}

.bear-body{
  cursor:grab;
  border-radius: 50%;
  width: 200px;
  position: relative;
  animation: updown 1.5s infinite;
  -webkit-animation: updown 1.5s infinite;


}

@keyframes updown{
  0%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
  100%{transform:translateY(0)}
}

@-webkit-keyframes updown /*Safari and Chrome*/
{
  0%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
  100%{transform:translateY(0)}
}



.bear{
  margin-top:25px;
  width: 200px;
  height: 200px;
  position:relative;
  animation: move 3s infinite;
  -webkit-animation:move 3s infinite; /*Safari and Chrome*/
   transform-origin: 50% 100%;

}

.bear-down{
  top:10px;
}

@keyframes move{
  0%{transform:rotate(-5deg)}
  50%{transform:rotate(5deg)}
  100%{transform:rotate(-5deg)}
}

@-webkit-keyframes move /*Safari and Chrome*/
{
  0%{transform:rotate(-5deg)}
  50%{transform:rotate(5deg)}
  100%{transform:rotate(-5deg)}
}

.black-npm{
  position: absolute;
  background: #333333;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, .1);
  cursor: pointer;
  height: 300px;
  width: 220px;
  left: -10px;
  top:-285px;
  z-index: 2;
  border:solid 10px rgba(255, 255, 255, .1);
  transition: all 0.6s;

}
.button{
  position: absolute;
  background-color: #ccc;
  bottom: -12px;
  box-shadow: 0 1px 0 1px rgba(0, 0, 0, .2);
  width: 30px;
  left: 42%;
  height: 8px;

}
.white-npm{
  position: absolute;
  bottom: 20%;
  width: 100px;
  left: 25%;
}
.white-npm img{
  width: 100px;
}

.eye{
    position: absolute;
    top: 100px;
    left: 35%;
    z-index: 1;
    animation: eye-nose 1.5s infinite;
    -webkit-animation: eye-nose 1.5s infinite;
    
}
@keyframes eye-nose{
  0%{transform:translateY(0px)}
  50%{transform:translateY(-8px)}
  100%{transform:translateY(0px)}
}

@-webkit-keyframes eye-nose{
  0%{transform:translateY(0px)}
  50%{transform:translateY(-8px)}
  100%{transform:translateY(0px)}
}

.eye img{
  position: absolute;
  width: 58px;
}
.big-eyes{
  opacity: 1;
}
.shark-eyes{
  opacity: 0;
}
.smile-eyes{
  opacity: 0;
}
.login-form{
  padding:0rem 2.5rem 2.5rem 2.5rem;
  font-weight: 600;
}

.form-group{
  position: relative;
}
.forget{
  position: absolute;
   right: 0;
   color: black;
   text-decoration:underline;
   font-weight: 400;
}
.forget:hover{
  color: black;
}
.btn{
  width: 100%;
  background-image: linear-gradient(-180deg, rgba(255, 255, 255, .09) 0%, rgba(17, 17, 17, .04) 100%);
  border: 1px solid rgba(22, 22, 22, .20)!important;
  color: rgb(97, 95, 95)!important;
  font-family: 'Source Sans Pro', 'Lucida Grande', sans-serif;
}
.btn:hover{
  color: black!important;
  background-image: linear-gradient(-180deg, rgba(255, 255, 255, .09) 0%, rgba(17, 17, 17, .1) 100%);
}
.xixi{
  text-align: center;
}
.register{
  display: inline-block;
  margin:1rem 0rem 0.5rem 0rem;
  color: rgba(0,0,0,.5);
  text-decoration:underline;
}
.register:hover{
  color: black;
}
.form-control:focus{
  border-color: #357edd!important;
  -webkit-box-shadow:none!important;
  box-shadow:none;
}
.remenber{
  display: none;
  color: red;
  font-size: 0.875rem;
  font-weight:400;
}